<template>
	<m-layout class="search" :class="{ isHis: listArr.length < 0 }" gap="0 24" :isShow="false">
		<view class="header" slot="header">
			<m-search lIconColor="#111" :params="likeWords"  >
				<text slot="left" class="searchleft">{{ tName }}</text>
			</m-search>
			<template v-if="twoList&&twoList.length > 1">
				<view class="tbs-box">
					<v-tabs :show="false" v-model="current" height="50rpx" :pills="true" :tabs="twoList" field="tname"
						color="#002D54" activeColor="#FFFFFF" pillsColor="var(--theme)" pillsBorderRadius="26rpx"
						:lineAnimation="false">
					</v-tabs>
				</view>
			</template>
			<!-- 条件筛选 -->
			<!-- 	<m-sticky :offsetTop="51" :customNavHeight="topNavHeight">
				<condition :sort='sort' @setType="sort = $event" @setPrice="setPrice" :priceShow="false" />
			</m-sticky> -->
			<!-- 条件筛选 -->
			<condition  v-if="wards==2 || wards==4" :sort='sort' @setType="sort = $event" @setPrice="setPrice" :priceShow="false" 
				:filterShow="wards!=7" />
		</view>
		<m-block bgColor="unset"  :isLoading="isLoading" :class="[wards==1 || wards==3?'mt-24':'']">
			<template v-for="(item, index) in listArr">
				<goodsCard  :item="item" type="2" />
			</template>
			<m-loading gap="100 0" :list="listArr" :pageIndex="pageIndex" :pageCount="pageCount" :loading="isLoading" />
		</m-block>
		<m-dialog></m-dialog>
	</m-layout>
</template>

<script>
	import { GetGoodsPage, GetGoodsTypePage } from '@/api/Goods.js';
	import condition from '../components/condition.vue';
	export default {
		components: { condition },
		data() {
			return {
				sort: 0, // 默认排序
				filterData: {}, // tag筛选数据
				likeWords: '',
				wards: 0, //分区
				tList: [],
				tName: '',
				current: '',
				listArr: [], // 商品列表
				pageIndex: 1,
				pageSize: 10,
				pageCount: 0,
				isLoading: true,
				oneId: -1, // 一级分类Id
				twoId: -1, // 二级分类Id
				twoList: [] // 二级分类列表
			};
		},
		watch: {
			current(val) {
				console.log("val===>", val)
				this.reset();
			},
			sort() {
				this.reset();
			}
		},
		async onLoad({ oneId, twoId, tName, isnew, ishot, wards } = {}) {
			this.tName = tName;
			this.oneId = oneId;
			this.twoId = twoId;
			this.wards = wards || 0;
			this.isnew = isnew || '0';
			this.ishot = ishot || '0';
			this.filterData = {
				isnew: this.isnew,
				ishot: this.ishot,
			}
			if (Number(this.isnew) || Number(this.ishot) || this.wards == 1 || this.wards == 3 ||this.wards == 4) return this.reset(); // 不需要查询二级查单的数据
			await this.GetGoodsTypePage();
			// if(this.isnew=='0'&&this.ishot=='0'){
			// 	this.GetGoodsTypePage();
			// }
		},
		methods: {
			setPrice(filterData = {}) {
				console.log('filterData===>', filterData);
				const { ishot, isnew, istop } = filterData;
				this.filterData = { ishot, isnew, istop };
				this.reset();
			},
			setType(type) {
				this.wards = type;
			},
			async reset() {
				this.isLoading = true;
				this.pageCount = 1;
				this.pageIndex = 1;
				await this.getData();
				this.isLoading = false;
			},
			// 通过分类id获取指定商品列表
			async getData() {

				if (this.pageIndex > this.pageCount) {
					return
				}
				const { success, list, pageCount } = await GetGoodsPage({
					sort: this.sort,
					tid: this.twoId ? this.twoList[this.current]['id'] : this.oneId,
					key: this.likeWords,
					
					pageIndex: this.pageIndex,
					pageSize: this.pageSize,
					...this.filterData
				});
				this.pageCount = pageCount;
				if (this.pageIndex <= 1) {
					this.listArr = list;
				} else {
					this.listArr = [...this.listArr, ...list];
				}
				this.pageIndex++;
				uni.stopPullDownRefresh();
			},
			// 获取分类列表
			async GetGoodsTypePage() {
				const { success, list } = await GetGoodsTypePage({
					pid: this.oneId,
					pageSize: 1000
				});
				this.twoList = list;
				if (!success) return this.isLoading = false;
				// 没有二级ID
				if (!this.twoId) return this.current = 0;
				list.forEach((item, index) => {
					// 有二级ID
					if (item.id == this.twoId) {
						console.log('this.current==>', index)
						this.current = index;
					}
				});
			}
		},
		onPullDownRefresh() {
			this.reset();
		},
		onReachBottom() {
			this.getData();
			console.log('触底了');
		}
	};
</script>

<style lang="scss">
	.isHis {}

	.search {
		.header {
			background: #fff;

			.searchleft {
				padding-left: 10rpx;

				font-size: 36rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #333333;
			}

			::v-deep .search-Item {
				background: #f5f5f5;
			}
		}

		.tbs-box {
			padding: 0 24rpx 17rpx;
			position: relative;
			z-index: 1;
		}
	}

	.empty {
		background: unset;
	}
</style>